doctype html
html
  head
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible" content="IE=edge")
    meta(name="viewport" content="width=device-width, initial-scale=1")
    title hack.css
    link(rel="stylesheet" href="./prism.css")
    link(rel="stylesheet" href="./hack.css?t=#{time}")
    link(rel="stylesheet", href="./site.css?t=#{time}")
  body.hack
    include github
    .main.container
      h1 hack.css - dead simple css framework

      p As you can see, this website is proudly built using hack.css.

      .alert.alert-info New! <a href="/dark.html">dark</a>, <a href="/dark-grey.html">dark-grey</a>, <a href="/solarized-dark.html">solarized-dark</a> and <a href="/standard.html">standard</a> modes are now available!

      include carbon

      h2 About

      p Many hackers enjoy the readability of markdown code, some stylings in hack.css are exactly the way markdown is.

      ul
        li conquer the world
        li rule the web
        li copy the code

      p
        a(target="_blank" href="https://daringfireball.net/projects/markdown/") kinda cool, huh?

      p hack.css is inspired by <a href="https://github.com/mrcoles/markdown-css" target="_blank">markdown.css</a> and <a href="http://zeit.co" target="_blank">zeit.co</a>

      h2 Use cases

      p hack.css is <strong>perfect</strong> for the homepage of your open-source projects! happy <code>&lt;coding&gt;</code> !

      h2 How to use?

      p Install via npm by running <code>npm install -S hack</code> and load it with your preferred pre-processor.

      p You can also simply hot-link the url of the css file.

      p The last step is to add the <code>.hack</code> class to your body element.

      :marked
        ```html
        <!-- required in all modes -->
        <link rel="stylesheet" href="/path/to/hack.css">

        <!-- markdown mode -->
        <body class="hack"></body>

        <!-- standard mode -->
        <link rel="stylesheet" href="/path/to/standard.css">
        <body class="standard"></body>

        <!-- dark mode -->
        <link rel="stylesheet" href="/path/to/dark.css">
        <body class="hack dark"></body>
        ```

      h2 User guide

      h3 Basic

      p Use <code>.container</code> to centralize the main content.

      p Use <strong>flexbox</strong> to make layouts.

      .example
        .grid.grid-example
          .cell.-4of12
            .content 4
          .cell.-4of12
            .content 4
          .cell.-4of12
            .content 4
        .grid.grid-example
          .cell.-4of12
            .content 4
          .cell.-8of12
            .content 8
        .grid.grid-example
          each i in new Array(12)
            .cell
              .content 1

      h4 <code>.grid</code> modifiers
      ul
        li
          | To align items with <strong>align-items</strong>
          ul
            li
              strong -top
              | : To top
            li
              strong -middle
              | : To middle
            li
              strong -bottom
              | : To bottom
            li
              strong -stretch
              | : Stretch items
            li
              strong -baseline
              | : To baseline
        li
          | To layout contents with <strong>justify-content</strong>
          ul
            li
              strong -left
              | : To left
            li
              strong -center
              | : To center
            li
              strong -right
              | : To right
            li
              strong -between
              | : Add spaces between items
            li
              strong -around
              | : Add spaces around items

      h4 <code>.cell</code> modifiers
      ul
        li
          strong -1of12
          | : Set item width to 8.3% of parent
        li
          strong -2of12
          | : Set item width to 16.7% of parent
        li
          strong -3of12
          | : Set item width to 25% of parent
        li
          strong -4of12
          | : Set item width to 33% of parent
        li
          strong -5of12
          | : Set item width to 41.7% of parent
        li
          strong -6of12
          | : Set item width to 50% of parent
        li
          strong -7of12
          | : Set item width to 58.3% of parent
        li
          strong -8of12
          | : Set item width to 66.7% of parent
        li
          strong -9of12
          | : Set item width to 75% of parent
        li
          strong -10of12
          | : Set item width to 83.3% of parent
        li
          strong -11of12
          | : Set item width to 91.7% of parent
        li
          strong -12of12
          | : Set item width to 100% of parent

      h3 Components

      include components

      footer.footer
        | Version #{version} Build #{build}

    script(src="./prism.js" async)
    script(src="./app.js" async)

